<template>
  <div class="dashboard-container">
    <div class="app-container">题库-精选组件</div>
    <el-card>
      <el-button @click="newContainer">新增试题</el-button>
      <el-button>批量导入</el-button>

      <el-form label-position="right" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="学科">
              <el-select v-model="selectedSubject" placeholder="请选择" width="100px">
                <el-option
                  v-for="item in sbjList"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        <el-col :span="5">
          <el-form-item label="状态">
            <el-select v-model="queryInfo.chkState"  placeholder="请选择">
              <el-option
                v-for="item in choiceList.chkState"
                :key="item"
                :label="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="难度">
            <el-select v-model="queryInfo.difficulty" placeholder="请选择">
              <el-option
                v-for="item in choiceList.difficulty"
                :key="item"
                :label="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="queryInfo.questionType" placeholder="请选择">
              <el-option
                v-for="item in choiceList.questionType"
                :key="item"
                :label="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>


      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="标签">

            <el-input placeholder="请输入"
              v-model="queryInfo.tags"
              clearable
              @clear="getQuestionChoice"

              >
            </el-input>
          </el-form-item>

        </el-col>

        <el-col :span="6" >
          <el-form-item label="录入人">
            <el-input placeholder="请输入"
              v-model="queryInfo.creatorID"
              clearable
              @clear="getQuestionChoice"
              >
            </el-input>
          </el-form-item>

        </el-col>

        <el-col :span="6" >
          <el-form-item label="关键字">

            <el-input placeholder="请输入题目编号/题干"
              v-model="queryInfo.keyword"
              clearable
              @clear="getQuestionChoice"
              >
            </el-input>
          </el-form-item>

        </el-col>

        <el-col :span="6" >
          <el-form-item label="题目备注">

            <el-input placeholder="请输入"
              v-model="queryInfo.remarks"
              clearable
              @clear="getQuestionChoice"
              size="mini"
              >
            </el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-input placeholder="请输入二级目录"
              v-model="queryInfo.catalogID"
              clearable
              @clear="getQuestionChoice"
              >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="城市">
            <el-select v-model="selectedProvince" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="item">

              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="区">
            <el-select v-model="selectedCity" placeholder="请先选择城市" :disabled="disabled">
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="item">

              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="简称">
            <el-input placeholder="请输入"
              v-model="queryInfo.shortName"
              clearable
              @clear="getQuestionChoice"
              >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-input placeholder="请输入"
              v-model="queryInfo.direction"
              clearable
              @clear="getQuestionChoice"
              >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button  @click="getQuestionChoice"> 搜索</el-button>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" :before-leave="beforeTabLeave">
        <el-tab-pane label="全部" name="first">
          <el-table
            :data="choiceList"

            >
            <el-table-column
              type="index"
              label="序号"
              >
            </el-table-column>
            <el-table-column
              property="number"
              label="试题编号"
              >
            </el-table-column>
            <el-table-column
              property="subjectID"
              label="学科"
              >
            </el-table-column>
            <el-table-column
              property="questionType"
              label="题型">
            </el-table-column>
            <el-table-column
              property="question"
              label="题干">
            </el-table-column>
            <el-table-column
              property="addDate"
              label="录入时间">
              <template slot-scope="scope">
                {{scope.row.addDate | format}}
              </template>
            </el-table-column>
            <el-table-column
              property="creator"
              label="录入人">
            </el-table-column>
            <el-table-column
              property="difficulty"
              label="难度">
            </el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState">
              <template slot-scope="scope" >
                <el-tag v-if= "scope.row.chkState == 0">待审核</el-tag>
                <el-tag v-else-if="scope.row.chkState == 1">通过</el-tag>
                <el-tag v-else>拒绝</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              property="chkRemarks"
              label="审核意见">
            </el-table-column>
            <el-table-column
              property="chkUser"
              label="审核人">
            </el-table-column>
            <el-table-column
              property="publishState"
              label="发布状态">
              <template slot-scope="scope" >
                <el-tag v-if= "scope.row.chkState == 0" type="info">待发布</el-tag>
                <el-tag v-else-if="scope.row.chkState == 1">已发布</el-tag>
                <el-tag v-else>已下架</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="300px">
              <template slot-scope="scope">

                <el-button size="mini" type="primary" >审核</el-button>
                <el-button size="mini" type="danger" >预览</el-button>
                <el-button size="mini" type="warning" >下架</el-button>
                <el-button size="mini" type="primary" >修改</el-button>
                <el-button size="mini" type="danger" @click="removeQuestion(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
           <el-table
            :data="choiceList"

            >
            <el-table-column
              type="index"
              label="序号"
              >
            </el-table-column>
            <el-table-column
              property="number"
              label="试题编号"
              >
            </el-table-column>
            <el-table-column
              property="subjectID"
              label="学科"
              >
            </el-table-column>
            <el-table-column
              property="questionType"
              label="题型">
            </el-table-column>
            <el-table-column
              property="question"
              label="题干">
            </el-table-column>
            <el-table-column
              property="addDate"
              label="录入时间">
              <template slot-scope="scope">
                {{scope.row.addDate | format}}
              </template>
            </el-table-column>
            <el-table-column
              property="creator"
              label="录入人">
            </el-table-column>
            <el-table-column
              property="difficulty"
              label="难度">
            </el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState">
              <template slot-scope="scope" >
                <el-tag v-if= "scope.row.chkState == 0">待审核</el-tag>
                <el-tag v-else-if="scope.row.chkState == 1">通过</el-tag>
                <el-tag v-else>拒绝</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              property="chkRemarks"
              label="审核意见">
            </el-table-column>
            <el-table-column
              property="chkUser"
              label="审核人">
            </el-table-column>
            <el-table-column
              property="publishState"
              label="发布状态">
              <template slot-scope="scope" >
                <el-tag v-if= "scope.row.chkState == 0" type="info">待发布</el-tag>
                <el-tag v-else-if="scope.row.chkState == 1">已发布</el-tag>
                <el-tag v-else>已下架</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="300px">
              <template slot-scope="scope">

                <el-button size="mini" type="primary" >审核</el-button>
                <el-button size="mini" type="danger" >预览</el-button>
                <el-button size="mini" type="warning" >下架</el-button>
                <el-button size="mini" type="primary" >修改</el-button>
                <el-button size="mini" type="danger" @click="removeQuestion(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <el-table
            :data="choiceList"

            >
            <el-table-column
              type="index"
              label="序号"
              >
            </el-table-column>
            <el-table-column
              property="number"
              label="试题编号"
              >
            </el-table-column>
            <el-table-column
              property="subjectID"
              label="学科"
              >
            </el-table-column>
            <el-table-column
              property="questionType"
              label="题型">
            </el-table-column>
            <el-table-column
              property="question"
              label="题干">
            </el-table-column>
            <el-table-column
              property="addDate"
              label="录入时间">
              <template slot-scope="scope">
                {{scope.row.addDate | format}}
              </template>
            </el-table-column>
            <el-table-column
              property="creator"
              label="录入人">
            </el-table-column>
            <el-table-column
              property="difficulty"
              label="难度">
            </el-table-column>
            <el-table-column
              label="审核状态"
              prop="chkState">
              <template slot-scope="scope" >
                <el-tag v-if= "scope.row.chkState == 0">待审核</el-tag>
                <el-tag v-else-if="scope.row.chkState == 1">通过</el-tag>
                <el-tag v-else>拒绝</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              property="chkRemarks"
              label="审核意见">
            </el-table-column>
            <el-table-column
              property="chkUser"
              label="审核人">
            </el-table-column>
            <el-table-column
              property="publishState"
              label="发布状态">
              <template slot-scope="scope" >
                <el-tag v-if= "scope.row.chkState == 0" type="info">待发布</el-tag>
                <el-tag v-else-if="scope.row.chkState == 1">已发布</el-tag>
                <el-tag v-else>已下架</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="300px">
              <template slot-scope="scope">

                <el-button size="mini" type="primary" >审核</el-button>
                <el-button size="mini" type="danger" >预览</el-button>
                <el-button size="mini" type="warning" >下架</el-button>
                <el-button size="mini" type="primary" >修改</el-button>
                <el-button size="mini" type="danger" @click="removeQuestion(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      </el-form>
      <!-- 分页区域 -->
      <el-pagination

        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions.js'
import { remove } from '@/api/hmmm/questions.js'
import {list as subjectList} from '@/api/hmmm/subjects.js'
import {provinces,citys} from '@/api/hmmm/citys.js'
export default {
  name: 'QuestionsChoice',
  created(){
    this.getQuestionChoice(),
    this.getSubjectList()
  },
  data() {
    return {
      choiceList:[], // 精选题库列表数据
      counts:0, // 总数据条数
      queryInfo:{   // 查询条件
        page:1,
        pagesize:4,
        chkState:'', // 这个值传不进去
        subjectID:'',// 学科
        difficulty:'',// 难度
        questionType:'',//题目类型
        tags:'',// 标签名称
        province:'', // 企业所在地省份
        city:'',// 企业所在城市
        keyword:'', // 关键字
        remarks:'',// 题目备注
        shortName:'',// 企业简称
        direction:'',// 方向
        creatorID:'', // 录入人
      },
      activeName: 'first', // tab栏当前活动页面
      sbjList:[],//学科列表
      selectedSubject:null,// 已选择学科
      provinces:provinces(),//省份城市信息
      citys:[],
      selectedProvince:'',
      selectedCity:'',
      disabled:true,
    }
  },
  methods:{
    // 跳转到添加试题页面
    newContainer(){
      this.$router.push({path:'/questions/new'})
    },
    // 请求精选题库列表
    async getQuestionChoice(){
      const { data:res } = await choice(this.queryInfo)
      this.choiceList = res.items
      this.counts = res.counts
      console.log(this.choiceList);

    },
    // 删除单条数据
    // 没有对应api 没法删除
    async removeQuestion(id){
      console.log(id);
    },
    // tabs选项栏改变改变chkState的值,数据库有问题,这个删不了
    beforeTabLeave(activeName,oldAcitveName){
      if (activeName == 'first') {
        this.queryInfo.chkState = ''
        this.getQuestionChoice()
      }
      if (activeName == 'second') {
        this.queryInfo.chkState = '0'
        this.getQuestionChoice()
      }
      if (activeName == 'third') {
        this.queryInfo.chkState = '1'
        this.getQuestionChoice()
      }
    },
    // 分页功能-监听pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getQuestionChoice()
    },
    // 分页功能-监听pagenum改变
    handleCurrentChange(newPage){
      this.queryInfo.page = newPage
      this.getQuestionChoice()
    },
    // 获取学科列表
    async getSubjectList(){
      const {data:res} = await subjectList()
      this.sbjList = res.items
      console.log(res.items);
    },
    getCitys:citys,
    handleChange(){
      this.citys = this.getCitys(this.selectedProvince)
      this.selectedCity = '',
      this.disabled = false;
    }
  },
  filters:{
    format(str) {
      return str.replace(/T/g,' ').replace(/Z/g,'')
    }
  }
}
</script>

<style scoped>
  .el-button--mini {
    padding: 2px 1px !important;

  }
  .el-col{
    padding-right: 6px
  }
  .el-row{
    padding-bottom: 20px
  }

</style>
